<template>
  <div class="test-api-container">
    <h1>API 测试页面</h1>
    
    <div class="test-section">
      <h2>草稿API测试</h2>
      
      <div class="input-section">
        <el-input v-model="draftTitle" placeholder="草稿标题" />
        <el-input v-model="draftContent" type="textarea" :rows="5" placeholder="草稿内容" />
        <el-input v-model="boardId" placeholder="板块ID" />
      </div>
      
      <div class="button-section">
        <el-button type="primary" @click="testSaveDraft">测试保存草稿</el-button>
        <el-button @click="testDirectFetch">直接测试请求</el-button>
      </div>
      
      <div class="result-section">
        <h3>测试结果</h3>
        <pre>{{ testResult }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import api from '@/api/index'
import axios from 'axios'

export default {
  name: 'TestAPI',
  setup() {
    const draftTitle = ref('测试草稿标题')
    const draftContent = ref('测试草稿内容')
    const boardId = ref('1')
    const testResult = ref('')
    
    // 测试保存草稿API
    const testSaveDraft = async () => {
      testResult.value = 'Testing...'
      
      try {
        // 构造测试数据
        const draftData = {
          title: draftTitle.value,
          content: draftContent.value,
          boardId: boardId.value
        }
        
        console.log('调用saveDraft API, 数据:', draftData)
        
        // 调用API保存草稿
        const response = await api.article.saveDraft(draftData)
        
        console.log('API响应:', response)
        testResult.value = JSON.stringify(response, null, 2)
      } catch (error) {
        console.error('API调用失败:', error)
        testResult.value = `Error: ${error.message}`
      }
    }
    
    // 直接测试请求，跳过API层封装
    const testDirectFetch = async () => {
      testResult.value = 'Testing direct fetch...'
      
      try {
        // 构造表单数据
        const formData = new URLSearchParams()
        formData.append('title', draftTitle.value)
        formData.append('content', draftContent.value)
        formData.append('boardId', boardId.value)
        
        console.log('直接发送请求到/api/article/draft/save')
        console.log('请求数据:', formData.toString())
        
        // 发送直接请求
        const response = await axios.post('/api/article/draft/save', formData, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          withCredentials: true
        })
        
        console.log('直接API响应:', response)
        testResult.value = JSON.stringify(response.data, null, 2)
      } catch (error) {
        console.error('直接请求失败:', error)
        testResult.value = `Error: ${error.message}\n${error.response ? JSON.stringify(error.response.data, null, 2) : ''}`
      }
    }
    
    return {
      draftTitle,
      draftContent,
      boardId,
      testResult,
      testSaveDraft,
      testDirectFetch
    }
  }
}
</script>

<style scoped>
.test-api-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

.test-section {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.input-section {
  margin-bottom: 20px;
}

.input-section > * {
  margin-bottom: 10px;
}

.button-section {
  margin-bottom: 20px;
}

.button-section > * {
  margin-right: 10px;
}

.result-section {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
}
</style> 